<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 1. 监听数据变化并触发 API 请求
    //     在用户输入内容时，我们可以监听输入框的值，并在一定延迟后触发搜索 API 请求，以避免过多请求。
    //     <template>
    //   <input v-model="searchQuery" placeholder="请输入关键词" />
    // </template>

    // <script>
    // export default {
    //   data() {
    //     return {
    //       searchQuery: "",
    //       searchResults: []
    //     };
    //   },
    //   watch: {
    //     searchQuery(newQuery) {
    //       this.fetchResults(newQuery);
    //     }
    //   },
    //   methods: {
    //     fetchResults(query) {
    //       console.log("Fetching results for:", query);
    //       // 这里可以加上 API 请求逻辑
    //     }
    //   }
    // };
    // <//script>

    // 2. 监听路由变化，执行特定逻辑

    // 3. 监听 props 变化，处理父子组件通信
</script>
</html>